<template>
	<view class="container">
		<uni-nav-bar title="搜索" fixed statusBar :border="false"></uni-nav-bar>
		<view class="searchBox">
			<uni-search-bar class="searchBox-search" placeholder="请输入产品名称" radius="10" bgColor="#fff"
				@confirm="getSearch"></uni-search-bar>
		</view>
		<view class="historyBox">
			<view class="titleBox">
				<text class="titleBox-title">历史搜索</text>
				<button v-if="Array.isArray(historyData) && historyData.length" class="titleBox-clearBtn" size="mini"
					@click="clearHistoryTag">清空</button>
			</view>
			<view class="tagBox" v-if="Array.isArray(historyData) && historyData.length">
				<uni-tag class="tagBox-tag" v-for="item in historyData" :key="item._id" :text="item?.name"
					:inverted="true" :circle="true" @click="() => handleHistory(item)"
					custom-style="background-color: #fff; border-color: #4335d6; color: #4335d6;"></uni-tag>
			</view>
			<empty-page v-else text='暂无历史'></empty-page>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const historyData = ref([])

	const loadingOptions = {
		loadingOptions: {
			title: '加载中...',
			mask: true
		},
		errorOptions: {
			type: 'toast'
		}
	}

	const clearHistoryTag = async () => {
		try {
			const searchGoods = uniCloud.importObject('search-goods')
			await searchGoods.deleteHistoryData()
			uni.showToast({
				title: '操作成功',
			})
			getHistoryData({
				customUI: true
			})
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
	}

	const getSearch = async (e) => {
		if (!e.value) {
			return uni.showToast({
				icon: 'none',
				title: '请输入搜索内容'
			})
		}
		try {
			const searchGoods = uniCloud.importObject('search-goods')
			await searchGoods.setHistoryData(e.value)

			uni.navigateTo({
				url: `/pages/search/results?text=${e.value}`
			})
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
	}

	const handleHistory = async item => {
		try {
			const searchGoods = uniCloud.importObject('search-goods')
			await searchGoods.updateHisCount(item?._id)

			uni.navigateTo({
				url: `/pages/search/results?text=${item?.name}`
			})
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
	}

	const getHistoryData = async (options = loadingOptions) => {
		try {
			const searchGoods = uniCloud.importObject('search-goods', options)
			const res = await searchGoods.getHistoryData()
			historyData.value = res?.data || []
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
		uni.stopPullDownRefresh()
	}

	onPullDownRefresh(() => getHistoryData())
	onShow(() => {
		getHistoryData()
	})
</script>

<style lang="scss" scoped>
	@import url("../../styles/common.scss");

	.container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--background-color);
	}

	.searchBox {
		width: 92vw;
		padding: var(--margin-vertical) 0;
		border-bottom: 1px solid #eee;

		&-search {
			width: 100%;
		}
	}

	.historyBox {
		width: 92vw;
		margin-top: calc(var(--margin-vertical) - 4px);
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-title {
			color: #333;
			flex: 1;
		}

		&-clearBtn {
			background-color: white;
		}
	}

	.tagBox {
		margin-top: 4px;
		word-break: break-all;

		&-tag {
			white-space: nowrap;
			height: 34px;
			line-height: 34px;
			margin: 0 4px;
		}
	}
</style>